<template lang="html">
  <div class="focuses-container">
    <div class="focuses-item" v-for="(item,index) in focusesData" :key="index">
      <div class="focuses-title">
        <div class="focuses-icon">
          <img :src="item.icon" alt="">
        </div>
        <div class="focuses-info">
          <div class="focuses-user">
            <p class="focuses-username">{{ item.username }}</p>
            <p class="focuses-city">{{ item.city }}</p>
          </div>
          <div class="focuses-time">
            {{ item.times }}
          </div>
        </div>
      </div>
      <p class="focuses-content">{{ item.content }}</p>
      <div class="focuses-pic">
        <img :src="item.pic1" alt="">
        <img :src="item.pic2" alt="">
        <img :src="item.pic3" alt="">
        <img :src="item.pic4" alt="">
      </div>
      <div class="focuses-footer">
        <div class="focuses-pinglun">
          <i class="iconfont icon-pinglun"></i>
          {{ item.pinglun }}
        </div>
        <div class="focuses-dianzan">
          <i class="iconfont icon-shixintaoxin"></i>
          {{ item.dianzan }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'Focuses',
  data () {
    return {
      focusesData:[]
    }
  },
  mounted() {
    this.$axios.get(this.HOST + '/burning/focus')
    .then(res => {
      this.focusesData = res.data
    })
    .catch(error => {
      console.log(error)
    })
  }
}
</script>

<style lang="less" scoped>
.focuses-container{
  .focuses-item{
    margin-top: 15px;
    box-sizing: border-box;
    width: 100%;
    font-size:14px;
    padding: 0 10px;
    .focuses-title{
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      div{
        float: left;
      }
      .focuses-icon{
        margin-right: 15px;
        img{
          width: 40px;
          height: 40px;
        }
      }
      .focuses-info{
        width: (355-55)/50rem;
        .focuses-city{
          font-size: 12px;
          height:20px;
          line-height: 20px;
          color:#666;
        }
        .focuses-time{
          float: right;
          height: 40px;
          line-height: 40px;
        }
      }
    }
    .focuses-pic{
      height: 360px;
      width: 100%;
      margin-bottom: 10px;
      img{
        height: 170px;
        width: 170px;
        float: left;
        margin-bottom:15px;
      }
      img:nth-child(2n){
        margin-right: 0;
        float:right;
      }
    }
    .focuses-content{
      color: #666;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    .focuses-footer{
      text-align: center;
      height:19.2px;
      div{
        float: right;
      }
      .focuses-dianzan{
        border-right: 1px solid #eee;
        margin-right: 15px;
        i{
          color: red;
        }
      }
      .focuses-pinglun{
        float: right;
      }
    }
  }
  .focuses-item:last-child{
    margin-bottom:60px;
  }
}
</style>
